<template>
  <view class="page">
    <view class="dates">
      <view class="date" :class="{active: dayjs().add(idx -1, 'day').format('YYYY-MM-DD') === act}" v-for="idx in 7" :key="idx" @click="changeDate(dayjs().add(idx -1, 'day').format('YYYY-MM-DD'))">
        <view class="week">
          {{ idx > 1 ? weekObj[dayjs().add(idx -1, 'day').format('ddd')] : '今日'}}
        </view>
        <view class="day">
          {{ dayjs().add(idx -1, 'day').format('MM-DD') }}
        </view>
        <view class="num" v-if="dates[dayjs().add(idx -1, 'day').format('YYYY-MM-DD')]">
          余{{dates[dayjs().add(idx -1, 'day').format('YYYY-MM-DD')].number}}
        </view>
        <view class="num" v-else>
          余0
        </view>
      </view>
    </view>
    
    <view class="tcard">
      <view class="title">
        时间
      </view>
      <view class="tform">
        <view class="tform-item" v-for="[key, item] in Object.entries(dates[act] || {}).sort()" :key="key" v-show="key != 'number'">
          <view class="value">
            <!-- 08:00～09:00 -->
            {{key}}
            <text style="margin-left: 12upx;">余{{item.quantity}}</text>
          </view>
          <view class="btn" :style="item.quantity > 0 ? '' : 'background: #959EAD;'" @click="subTime(key, item)">
            {{ item.quantity > 0 ? '预约' : '约满' }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import dayjs from "dayjs"
  import {getNumberSource} from '@/api/physical.js'
  const weekObj = {
    Mon: '周一',
    Tue: '周二',
    Wed: '周三',
    Thu: '周四',
    Fri: '周五',
    Sat: '周六',
    Sun: '周日'
  }
  export default {
    data() {
      return {
        weekObj,
        dayjs,
        act: dayjs().format('YYYY-MM-DD'),
        dates: {},
      }
    },
    onLoad() {
      this.getNumberSource()
    },
    methods: {
      getNumberSource() {
        const data = {
          time: '2024-08-21'
        }
        getNumberSource().then(res => {
          this.dates = res
          // Object.keys(res).forEach(key => {
          //   res[key]
          // })
        })
      },
      changeDate(time) {
        this.act = time
      },
      subTime(key, item) {
        if (item.quantity == 0) return 
        let pages = getCurrentPages(); // 页面栈
        let beforePage = pages[pages.length - 2]; // 前一个页面
        // beforePage.$vm.choseTime = this.act +' '+ key.split('-')[0]; // 执行前一个页面的刷新
        beforePage.$vm.choseTime = {
          time: this.act +' '+ key.split('-')[0],
          quantityId: item.quantityId
        }
        uni.navigateBack({
        	delta: 1//1表示返回上一页
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
.dates {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0;
  border-bottom: 1px dashed #E6E6E6;
  .date {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    width: 120upx;
    height: 135upx;
    // background: #FFFFFF;
    border-radius: 8upx;
    background-color: #FFF;
    text-align: center;
    padding: 12upx 0;
    .week {
      font-size: 10px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #A0A0A0;
      line-height: 18px;
    }
    .day {
      font-size: 12px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #3F4144;
      line-height: 18px;
    }
    .num {
      font-size: 20upx;
    }
    &.active {
      // background: url('../../../assets/referral/date_back.png');
      background-color: $theme-color;
      background-size: 100% 100%;
      // color: $theme-color;
      >.week {
        color: #FFF;
      }
      >.day {
        color: #FFF;
      }
      >.num {
        color: rgba(255,255,255,0.7);
      }
    }
  }
}
.btn {
  width: 120upx;
  height: 40upx;
  background: #366AA4;
  border-radius: 40upx;
  text-align: center;
  line-height: 40upx;
  color: #FFF;
}
</style>
